<template>
    <!-- 列表模板 -->
    <div>
        <!-- 搜索 -->
        <el-card v-if="search">
            <slot name="search"></slot>
        </el-card>
        <el-card class="mt-lg">
            <div v-if="title || operation" slot="header" class="flex-center">
                <!-- 标题 -->
                <div class="table-title  flex-1" v-show="title">
                    <div>{{ title }}</div>
                </div>
                <!-- 操作 -->
                <div class="operation" v-if="operation">
                    <slot name="operation"></slot>
                </div>
            </div>
            <!-- 猎表 -->
            <slot name="list"></slot>
            <!-- 分页 -->
            <div class="pagination" v-if="pagination">
                <slot name="pagination"></slot>
            </div>
        </el-card>
        <slot></slot>
    </div>
</template>
<script>
export default {
    props: {
        title: {
            type: String,
            default: ""
        },
        // 是否有搜索
        search: {
            type: Boolean,
            default: true
        },
        // 是否分页
        pagination: {
            type: Boolean,
            default: true
        },
        // 是否有操作项目 如添加
        operation: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {};
    }
};
</script>
<style lang="scss" scoped>
.table-title {
    font-size: 16px;
    color: #000;
    font-weight: 600;
    display: flex;
    width: 100%;
    .operation {
        display: flex;
        justify-content: flex-end;
    }
}
.pagination {
    margin: 16px 24px 16px 0;
    display: flex;
    justify-content: flex-end;
}
</style>
